{#if help}
<HelpDisplay>
    <div>{@html help}</div>
</HelpDisplay>
{/if}
<div
    class="control-group vis-option-group vis-option-type-checkbox"
    class:is-compact="compact"
    data-uid="{uid}"
>
    <label class="checkbox {disabled? 'disabled' :''} {faded? 'faded' :''}">
        <input type="checkbox" disabled="{disabled}" bind:checked="value" bind:indeterminate /><span
            class="css-ui"
        ></span>
        { label }
    </label>
    {#if disabled && disabledMessage}
    <div transition:slide>
        <div class="disabled-msg">{@html disabledMessage}</div>
    </div>
    {/if}
</div>

<style>
    .vis-option-type-checkbox {
        margin-right: 1em; /* Space for help icon */
    }
    .vis-option-type-checkbox.is-compact {
        margin-bottom: 6px !important;
    }
    .vis-option-type-checkbox label.checkbox {
        /*  High specifity selector, needed to override static styling */
        text-align: left;
        position: relative;
        left: 0;
        top: 6px;
        padding-left: 22px;
        width: calc(100% - 22px);
    }

    label.checkbox.disabled,
    label.checkbox.faded {
        color: #999;
    }

    label.checkbox.disabled input,
    label.checkbox.faded input {
        opacity: 0.5;
    }

    input[type='checkbox'] {
        float: none;
        opacity: 0 !important;
        pointer-events: none;
        position: absolute;
        display: inline-block;
        vertical-align: sub;
        width: 40px;
    }

    input[type='checkbox'] + span.css-ui {
        display: inline-block;
        width: 0.85em;
        height: 0.85em;
        border-radius: 2px;
        border: 1px solid #bbb;
        vertical-align: baseline;
        position: absolute;
        top: 1px;
        left: 1px;
    }

    input[type='checkbox']:checked + span.css-ui {
        background: #18a1cd;
        border-color: #18a1cd;
    }

    input[type='checkbox']:checked + span.css-ui:after {
        position: absolute;
        display: block;
        color: white;
        left: 0.15em;
        top: 0.4em;
        font-weight: bold;
        content: '\e023';
        font-family: 'iconmonstr-iconic-font';
        font-size: 0.65em;
        line-height: 0.8em;
    }

    input[type='checkbox']:indeterminate + span.css-ui {
        background: #96d2e6;
        border-color: #96d2e6;
    }

    input[type='checkbox']:indeterminate + span.css-ui:after {
        content: '';
        position: absolute;
        display: block;
        background: white;
        left: calc(50% - 0.6ex);
        top: calc(50% - 1px);
        height: 2px;
        width: 1.2ex;
    }

    input[type='checkbox']:focus + span.css-ui {
        border-color: #18a1cd;
        box-shadow: 0 0 1px 1px fade(#18a1cd, 55%);
    }

    input[type='checkbox']:disabled + span.css-ui {
        background: #ddd;
        border-color: #bbb;
        cursor: default;
        opacity: 0.6;
    }

    input[type='checkbox']:disabled:checked + span.css-ui {
        border-color: #bbb;
        background: #bbb;
    }

    .disabled-msg {
        font-size: 11px;
        font-style: italic;
        color: #a8a8a8;
        line-height: 1.2;
        padding: 4px 0 0 22px;
    }
</style>

<script>
    import slide from 'svelte-transitions-slide';
    import HelpDisplay from './HelpDisplay.html';

    export default {
        components: { HelpDisplay },
        data() {
            return {
                value: false,
                disabled: false,
                faded: false,
                compact: false,
                indeterminate: false,
                disabledMessage: '',
                help: false,
                uid: ''
            };
        },
        transitions: { slide }
    };
</script>
